<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- <script type="text/javascript" src="../javascripts/header.js"></script> -->
  <link rel="stylesheet" href="../stylesheets/css/header.css">
  <style>

  </style>
</head>

<body>
  <header>
    <div class="headtop">
      <div class="logo">
        <a href="http://localhost:3000/index1.html"></a>
      </div>
      <div class="search">
        <input type="text" placeholder="搜索电影、电视剧名" id="input_search">

        <button id="btn_search"></button>
        <ul id="input_image">

        </ul>
      </div>
      <div class="userinfo">
        <img src="../images/page/user_avatar.png" alt="用户头像">
        <span>&nbsp刘子义</span>
      </div>
    </div>

    <div class="headdown">
      <ul>
        <li><a href="">影讯&购票</a></li>
        <li><a href="http://localhost:3000/moremovie.html">选电影</a></li>
        <li><a href="">电视剧</a></li>
        <li><a href="">排行榜</a></li>
        <li><a href="">分类</a></li>
        <li><a href="">影评</a></li>
        <li><a href="">2020榜单</a></li>
        <li><a href="">2020报告</a></li>
      </ul>
    </div>
  </header>

</body>
<script>

  $(function () {
    // 搜索框
    const input_search = $('#input_search')
    // 搜索提交按钮
    const btn_search = $('#btn_search')
    // ul盒子
    const input_image = $('#input_image')
    let timer = null;
    input_image.css('display', 'none')

    // 搜索联想
    input_search.on('input', function () {
      var key = this.value;
      // 如果输入框中无内容

      if (key.trim().length == 0) {
        // 将提示下拉框隐藏掉
        input_image.css('display', 'none')

        // 阻止向下运行
        return;
      }

      timer = setTimeout(function () {
        // 清除上一次开启的定时器
        clearTimeout(timer);
        // 向服务器端发送请求

        $.ajax({
          url: 'http://localhost:3000/index/imagesearch',
          data: {
            mname: key
          },
          success: result => {
            let str = ''
            for (const i of result.data) {
              str = str +
                `<li id="selectmovie">
									<a  href="javascript: void(0)">
										<img src="${i.mimage}"/>
										<div>
											<span class="sp_title">${i.mname}</span>
											<span class="sp_date">${i.mshowdate}</span>
											<p>${i.mcountry} / ${i.mlanguage}</p>
										</div>
									</a>
							</li>`
            }
            input_image.html(str)
            input_image.css('display', 'block')

            // 给li绑定点击事件
            input_image.children('li').each(function (i) {
              $(this).click(function () {
                const title = $(this).find('.sp_title').text()
                // 修改a链接的href值
                $(location).attr('href', `http://localhost:3000/movieinfo.html?mname=${title}`)
              })
            })
          },
          error: err => {
            console.log(err);
          }
        })
      }, 100)

    })
    /* input_search.on('blur', function () {
      input_image.css('display', 'none')
      // input_search.val('')
    }) */

    // 按钮提交查询,转到searchmovie页面
    btn_search.on('click', function () {
      const movies = input_search.val()
      $(location).attr('href', `http://localhost:3000/searchmovie.html?mname=${movies}`)
    })
    //输入内容，按回车也触发搜索事件
    input_search.keydown(function (e) {
      if (e.keyCode == 13) {
        const movies = input_search.val()
        $(location).attr('href', `http://localhost:3000/searchmovie.html?mname=${movies}`)
      }
    })
  })
</script>

</html>